<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/common.js"></script>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title"></h6>
        <small>
            <span render-html="releaseTime"></span>
            浏览 <span> 1亿+</span>
            回复 <span> 1亿+</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <img  class="rounded-circle" render-src="author.headImgUrl">
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <button class="btn" id="followBtn">关注</button><br>
                    <span>1亿+</span>篇游记
                    <span>1亿+</span>粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name"></span>
            </div>
        </div>
    </div>
    ,
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends"></span>
                </div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-html="personName"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days"></span>
                </div>
            </div>
        </fieldset>

        <!-- 游记的内容 -->
        <div class="content" render-html="travelContent.content"></div>


    </div>

    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up"  id="likeBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o"  id="commentBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa fa-star-o" id="collectBtn"> </i>
        </div>
    </div>

</div>

<!--这些js引用不能删，否则页面会报错-->
<link rel="stylesheet" href="/css/strategyComment.css" />
<link rel="stylesheet" href="/js/plugins/jquery_emoticon/css/base.css" />
<script src="/js/plugins/jquery_emoticon/jquery.mb.emoticons.js"></script>
<script src="/js/plugins/jrender/jrender.js"></script>
<script>
    $(function () {
        //文档加载完毕,拿到当前游记的id
        var id = getParams().id;
        var destination=getParams().destination;
        var authorId;
        if (id) {
            //有id发送ajax请求获取游记信息
            $.get("/travels/"+id, function (data) {
                //回显游记信息
                $(".travels").renderValues(data);
                authorId = data.author.id;
            });

        }

        //发送ajax请求获取游记的评论列表
        $.get("/travels/"+id+"/comments", function (data) {
            console.log(data);
            $("#comments").renderValues({list:data},{
                handle:function (ele,value) {
                    $(ele).html(value).emoticonize(true).show();
                },
                replay:function (ele,value) {
                    ele.href = "userReply.html?commentId="+value;
                },
                dest:function (ele,value) {
                   $(ele).attr("id",value);

                }
            });
        });

        if (destination != null) {
            setTimeout(function () {
                var num = $("#"+destination).offset().top;
                $("html, body").animate({
                    scrollTop: num - 250
                }, 1000);

            }, 800);


        }


        //点击评论按钮
        $("#commentBtn").click(function () {
            window.location.href = "userComment.html?travelId="+id+"&id="+authorId;
        })
    });
</script>
<!--用户评论列表，不能删-->
<div class="container tag ">
    <h6 align="center" class="btn-info" >骡友评论</h6>
    <div  id="comments" value="12">
    <div render-loop="list">
        <div class="container row comment a" >
            <div class="col-2 comment-head a" >
                <a href="userProfiles.html" render-key="list.id" render-fun="dest">
                    <img class="rounded-circle" render-src="list.user.headImgUrl">
                </a>
            </div>
            <div class="col comment-right">
                <span class="authorName"   style="margin-right:20px;color:blue"  render-html="list.user.nickName"></span>
                <i class="fa fa-calendar"></i><span render-html="list.commentTime"></span>
                <div class="comment-content">
                    <div  style="display:none" render-key="list.comment" render-fun="handle">
                    </div>
                    <a href="userReply.html" render-key="list.id" render-fun="replay">
                    <i class="fa  fa-commenting-o " style="margin-right: 10px"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

</div>
<hr>
<!--结束-->
</body>
</html>